<template>
    <div class="imgDivFather">
      <div @click="demo" class="imgDiv">
        <img
          v-for="(x, i) in arr.arr"
          :id="i"
          :coo="JSON.stringify(arr.locaArr[i])"
          :key="i"
          :src="x"
          @click="move"
        />
      </div>
      <div class="tool">
        <input type="button" value="开始游戏" @click="startGame(flag)" />
        <input type="button" value="重置" @click="reset" />
        <input type="button" value="暂停" @click="theword(flag)" />
        <div class="time">时间:<span style="font-size:60px;">{{ time }}</span></div>
      </div>
    </div>
</template>

<script setup>
/*eslint-disable*/
import i1 from "../assets/1.gif";
import i2 from "../assets/2.jpg";
import i3 from "../assets/3.gif";
import i4 from "../assets/4.gif";
import i5 from "../assets/5.gif";
import i6 from "../assets/6.gif";
import i7 from "../assets/7.gif";
import i8 from "../assets/8.gif";
import i9 from "../assets/9.gif";
import white from "../assets/white.png";
import { reactive, defineEmits, ref, computed, nextTick } from "vue";
let flag = ref(true); //定时器锁,如果未true就可以运行，false就不能运行
const time = ref(0); //总耗时
let lv = null; //计时器
const emit = defineEmits([]);
const arr = reactive({
  arr: [i1, i2, i3, i4, i5, i6, i7, i8, white],
  arr2: [i1, i2, i3, i4, i5, i6, i7, i8, white],
  arr3: [i1, i2, i3, i4, i5, i6, i7, i8, white],
  str: [],
  locaArr: [
    [1, 2, 5, 6],
    [2, 3, 6, 7],
    [3, 4, 7, 8],
    [5, 6, 9, 10],
    [6, 7, 10, 11],
    [7, 8, 11, 12],
    [9, 10, 13, 14],
    [10, 11, 14, 15],
    [11, 12, 15, 16],
  ],
});
//计算空白图片点坐标
const imgLast = (ar) => {
  let top = ar[0];
  let left = ar[1];
  return {
    leftTop: [top, top],
    leftBottom: [left, top + 100],
    rightTop: [left + 100, top],
    rightBottom: [left + 100, top + 100],
  };
};
//图片点击后换位置
const move = (e) => {
  //如果没有开始就点击
  if (flag.value) return alert('请点击"开始按钮"开始游戏!');
  //获取white图片下标
  let index = arr.arr.findIndex((x) => x === white);
  let last = [];
  for (let i in arr.locaArr[index]) {
    last.push(arr.locaArr[index][i]);
  }
  //图片的4条线坐标方法
  const com = (last) => {
    return [
      [last[0], last[2]], //左
      [last[0], last[1]], //上
      [last[1], last[3]], //右
      [last[2], last[3]], //下
    ];
  };
  last = com(last); //空白图片
  //当前图片4个点
  let obj = com(JSON.parse(e.target.getAttribute("coo")));
  //将打乱后的数组和元素中拼接成字符串，方便对比
  let scs = "";
  for (let sc in arr.arr) {
    scs += arr.arr[sc];
  }
  let scs2 = "";
  for (let sc2 in arr.arr2) {
    scs2 += arr.arr[sc2];
  }
  //temp点击的图片id，如果点击的图片是空白图片就返回不做操作
  let temp = parseInt(e.target.id);
  for (let i of obj) {
    for (let j of last) {
      if (i.join(",") === j.join(",")) {
        //交换图片
        let st = arr.arr[index];
        arr.arr[index] = arr.arr[temp];
        arr.arr[temp] = st;
        if (arr.arr.join("") == arr.arr2.join("")) {
          alert("恭喜你拼图成功!，总耗时:" + time.value+'秒,欣赏美女时刻');
          arr.arr[8] = i9;
          clearInterval(lv); //暂停计时器
          time.value = 0; //时间归零
          flag.value = true;
        }
        break;
      }
    }
  }
};

const arrSort = () => {
  let arrCo = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  //打乱数组
  for (var i = 0; i < arrCo.length - 1; i++) {
    var iRand = parseInt(arrCo.length * Math.random());
    var temp = arrCo[i];
    arrCo[i] = arrCo[iRand];
    arrCo[iRand] = temp;
  }
  let n = 0;
  let nxs = [];
  for (let i = 0; i < arrCo.length; i++) {
    for (let j = i + 1; j < arrCo.length; j++) {
      nxs.push([arrCo[i], arrCo[j]]);
    }
  }
  for (let z = 0; z < nxs.length; z++) {
    if (nxs[z][0] > nxs[z][1]) {
      n++;
    }
  }
  if (n % 2 == 0) {
    for (let h = 0; h < arrCo.length; h++) {
      arr.arr[h] = arr.arr3[arrCo[h]];
    }
  } else {
    for (let h = 0; h < arrCo.length; h++) {
      arr.arr[h] = arr.arr3[arrCo[h]];
    }
    let js = arr.arr[6];
    arr.arr[6] = arr.arr[7];
    arr.arr[7] = js;
  }
};
/*开始游戏*/
const startGame = (fl) => {
  if (fl) {
    arr.arr = [i1, i2, i3, i4, i5, i6, i7, i8, white];
    arrSort();
    time.value = 0;
    lv = setInterval(() => {
      time.value += 1;
    }, 1000);
    flag.value = false;
  }
};
/*重置，重置后才能重新开始游戏*/
let reset = () => {
  arr.arr = [i1, i2, i3, i4, i5, i6, i7, i8, white];
  time.value = 0;
  clearInterval(lv);
  flag.value = true;
};
/*暂停*/
const theword = () => {
  if (!flag.value) {
    clearInterval(lv);
    var mymessage = confirm("游戏暂停中!");
    if (mymessage) {
      flag.value = true;
      lv = setInterval(() => {
        time.value += 1;
      }, 1000);
      flag.value = false;
    }
  }
};
</script>

<style scoped>
* {
  font-family: "楷体";
  font-size: 50px;
}
.imgDivFather {
  display: flex;
  width: 600px;
  flex-direction: column;
}
img {
  width: 200px;
  height: 200px;
}
.imgDiv {
  width: 600px;
  height: 600px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}
.tool {
  display: flex;
  justify-content: space-around;
}
.time {
  line-height: 80px;
  color:pink;
}
</style>
